/*
 * @Author: Zhang Kai
 * @Date: 2021-11-11 11:06:31
 * @LastEditors: Zhang Kai
 * @LastEditTime: 2021-11-18 16:57:18
 * @FilePath: /metricsx-standard-ui/src/components/Arithmetic/components/SymbolPopover.tsx
 */
import { defineComponent, ref } from 'vue';
const SymbolPopover = defineComponent({
  name: 'SymbolPopover',
  props: {
    symbolVal: {
      type: String,
      default: ''
    }
  },
  emits: ['SymbolClick'],
  setup: (props, { slots, attrs, emit }) => {
    const currentSymbol = ref('');

    const popoverVisible = ref(false);

    const SymbolList = [
      { label: '空', value: '' },
      { label: '+', value: '+' },
      { label: '-', value: '-' },
      { label: '*', value: '*' },
      { label: '/', value: '/' },
      { label: '(', value: '(' },
      { label: ')', value: ')' }
    ];
    return () => {
      const { symbolVal } = props;
      return (
        <div class="SymbolPopover">
          <el-popover
            visible={popoverVisible.value}
            placement="bottom"
            width="200"
            trigger="click"
            v-slots={{
              reference: () => (
                <el-button
                  style={{ width: '20px', fontSize: '16px', color: '#000' }}
                  type="text"
                  onClick={() => (popoverVisible.value = true)}
                >
                  {symbolVal || currentSymbol.value}
                </el-button>
              )
            }}
          >
            <div class="symbol-list-wrap">
              {SymbolList.map((v: any) => (
                <div
                  onClick={() => {
                    (popoverVisible.value = false),
                      (currentSymbol.value = v.value);
                    emit('SymbolClick', v.value);
                  }}
                >
                  {v.label}
                </div>
              ))}
            </div>
          </el-popover>
        </div>
      );
    };
  }
});
export default SymbolPopover;
